<h2 class="text-xl"> {{ 'PAC.MODEL.AccessControl.Overview' | translate: {Default: 'Access Control Overview'} }} </h2>

<div class="flex-1 h-1/2 flex flex-col">
  <h3 class="text-lg"> {{ 'PAC.MODEL.AccessControl.RolesManage' | translate: {Default: 'Roles Manage'} }} </h3>
  <div class="flex-1 mt-4 overflow-auto rounded-lg border border-gray-200 dark:border-neutral-700">
    <table mat-table [dataSource]="roles$ | async" class="ngm-density__compact w-full">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Roles' | translate: {Default: 'Roles'} }} </th>
        <td mat-cell *matCellDef="let element">
          <a href [routerLink]="['..', element.key]">{{ element.name}}</a>
        </td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Type' | translate: {Default: 'Type'} }} </th>
        <td mat-cell *matCellDef="let element">
            <mat-radio-group [ngModel]="element.type" disabled class="ngm-radio-group__horizontal" displayDensity="compact">
                <mat-radio-button >{{ 'PAC.MODEL.AccessControl.SingleRole' | translate: {Default: 'Single Role'} }}</mat-radio-button>
                <!-- <mat-radio-button [value]="RoleTypeEnum.single">Single</mat-radio-button> -->
                <mat-radio-button [value]="RoleTypeEnum.union">
                    {{ 'PAC.MODEL.AccessControl.UnionRole' | translate: {Default: 'Union Role'} }}
                </mat-radio-button>
            </mat-radio-group>
        </td>
      </ng-container>
    
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Action' | translate: {Default: 'Action'} }} </th>
        <td mat-cell *matCellDef="let element">
          <button mat-icon-button displayDensity="compact" ngmAppearance="danger" (click)="removeRole(element.key)">
            <mat-icon>close</mat-icon>
          </button>
        </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="roleDisplayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: roleDisplayedColumns;"></tr>

      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell text-center" colspan="4">
          {{ 'PAC.KEY_WORDS.NoData' | translate: {Default: 'No data'} }}
        </td>
      </tr>
    </table>
  </div>

</div>

<div class="flex-1 h-1/2 flex flex-col">
  <h3 class="text-lg"> {{ 'PAC.MODEL.AccessControl.UsersManage' | translate: {Default: 'Users Manage'} }} </h3>
  <div class="flex justify-between items-center">
    <pac-inline-search [formControl]="searchControl"/>

    <div ngmButtonGroup>
      <button mat-flat-button displayDensity="cosy" color="primary" (click)="onAddUser()">
        {{ 'PAC.MENU.AddUsers' | translate: {Default: 'Add Users'} }}
      </button>
    </div>

  </div>

  <div *ngIf="userRoles$ | async as userRoles" class="flex-1 mt-4 overflow-auto rounded-lg border border-gray-200 dark:border-neutral-700">
    <table mat-table [dataSource]="userRoles.users" class="ngm-density__compact w-full">
    
      <!-- Name Column -->
      <ng-container matColumnDef="user">
        <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.User' | translate: {Default: 'User'} }} </th>
        <td mat-cell *matCellDef="let element">
          <pac-user-profile-inline [user]="element.user"></pac-user-profile-inline>
        </td>
      </ng-container>

      <ng-container matColumnDef="roles">
        <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Roles' | translate: {Default: 'Roles'} }} </th>
        <td mat-cell *matCellDef="let element">
          <mtx-checkbox-group [items]="userRoles.roles" [ngModel]="element.roles"
            (ngModelChange)="onRolesChange($event, element.user)"></mtx-checkbox-group>
        </td>
      </ng-container>

      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Action' | translate: {Default: 'Action'} }} </th>
        <td mat-cell *matCellDef="let element">

          <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" (click)="removeUser(element.user.id)">
            <mat-icon>close</mat-icon>
          </button>
        </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

       <!-- Row shown when there is no matching data. -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell text-center" colspan="4">
          {{ 'PAC.KEY_WORDS.NoData' | translate: {Default: 'No data'} }}
        </td>
      </tr>
    </table>
  </div>
</div>
